<template>
  <div class="xq">
    <div class="head">
      <span @click="onClickLeft"> 〈 返回</span>
      <span>排名</span>
      <span></span>
    </div>
    <header>
      <input type="text" placeholder="搜索你想知道的一切排名" />
    </header>
    <div class="nr">
      <select name="全球" id="">
        <option value="" v-for="(item, index) in classDrop" :key="index">
          {{ item.name }}
        </option>
      </select>
    </div>
    <div class="ph">
      <span>排名</span>
      <span style="margin-left: 70px">名称</span>
      <div class="v">
        <ul>
          <li v-for="(item, index) in classDetail" :key="index">
            <span
              style="
                width: 22px;
                height: 22px;
                border-radius: 50%;
                color: #eee;
                background: #ccc;
                text-align: center;
                font-size: 13px;
              "
              >{{ index }}</span
            >
            <span
              style="
                width: 200px;
                height: 25px;
                background: #ccc;
                border-radius: 10px;
              "
              >{{ item.name }}</span
            >
          </li>
        </ul>
      </div>
    </div>
    <div class="xd">
      <van-tabs v-model="activeName">
        <van-tab title="今日精选">
            <dl>
              <dt>
                <img src="//img11.360buyimg.com/seckillcms/s140x140_jfs/t1/150231/3/10208/79796/5f8176bfE77ac533c/ce8bf284d66f6337.jpg.webp" alt="">
              </dt>
              <dd>
                <p>今日手机</p>
              </dd>
            </dl>
        </van-tab>
        <van-tab title="一日内精选"> <dl>
              <dt>
                <img src="//img11.360buyimg.com/seckillcms/s140x140_jfs/t1/150231/3/10208/79796/5f8176bfE77ac533c/ce8bf284d66f6337.jpg.webp" alt="">
              </dt>
              <dd>
                <p>今日手机</p>
              </dd>
            </dl></van-tab>
        <van-tab title="一周内精选">无</van-tab>
        <van-tab title="一月内精选">无</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { getClassDropList, getClassDetail } from "@/api/classify";
import { defineComponent, computed, reactive } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup(props, context) {
    function onClickLeft() {
      console.log(1);
      this.$router.go(-1);
    }
    let store = useStore();
    return {
      onClickLeft,
      classDrop: computed(() => store.state.Classify.classDrop),
      classDetail: computed(() => store.state.Classify.classDetail),
    };
  },
});
</script>

<style>
.xq {
  width: 100%;
  height: 100%;
}
.xd dl{
  text-align: center;
}
.head {
  font-size: 15px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}
.nr {
  width: 100%;
}
.nr select {
  width: 88px;
  margin: 5px;
  border-radius: 10px;
}
.ph {
  width: 100%;
  height: 350px;
  overflow: hidden;
  margin-top: 10px;
}
.v {
  margin-top: 10px;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.ph {
  margin-top: 10px;
}
.ph > span {
  margin: 25px;
}
.ph ul li {
  margin-top: 5px;
  display: flex;
  /* text-align: center; */
}
.ph ul li span {
  line-height: 25px;
  text-align: center;
  margin-left: 30px;
}
header {
  display: flex;
  justify-content: center;
  align-items: center;
}
header input {
  width: 95%;
  height: 30px;
  background: #eee;
  border-radius: 15px;
  border: 0;
  margin-top: 5px;
  font-size: 13px;
  text-indent: 10px;
}
</style>